<template>
  <div>
    <page-main>
      <el-form :model="search" inline>
        <el-form-item label="隐患地址">
          <el-input v-model="search.address" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="处理时间">
          <el-date-picker v-model="search.exec_time" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDateList(1)" size="mini">搜索</el-button>
          <el-button type="warning" @click="reset" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%" height="50vh" v-loading="loading">
        <el-table-column prop="unit_id" label="社会单位"></el-table-column>
        <el-table-column prop="danger_source" label="上报来源" :formatter="dangerSourceFormatter"></el-table-column>
        <el-table-column prop="check_remark" label="隐患描述"></el-table-column>
        <el-table-column prop="address" label="隐患地址"></el-table-column>
        <el-table-column prop="effect_ids" label="可能导致的事故"></el-table-column>
        <el-table-column prop="danger_level" label="隐患等级"></el-table-column>
        <el-table-column prop="check_images" label="上报图片">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="upDataUrl + scope.row.check_images"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.check_images]"
            ></el-image> </template
        ></el-table-column>
        <el-table-column prop="check_videos" label="上报视频">
          <template #default="scope">
            <video
              v-if="
                Object.prototype.toString.call(scope.row.check_videos) == '[object Array]' &&
                scope.row.check_videos.length >= 1
              "
              width="60"
              height="60"
              controls="controls"
            >
              <source :src="scope.row.check_videos[0]" type="video/ogg" />
              <source :src="scope.row.check_videos[0]" type="video/mp4" />
              <source :src="scope.row.check_videos[0]" type="video/webm" />
              <object :data="scope.row.check_videos[0]" width="320" height="240"></object>
            </video>
            <img v-else src="@/assets/images/errorVideo.png" style="width: 60px; height: 60px; margin-right: 20px" />
          </template>
        </el-table-column>
        <el-table-column prop="result_remark" label="处理结果描述"></el-table-column>
        <el-table-column prop="result_images" label="处理结果图片">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="upDataUrl + scope.row.result_images"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.result_images]"
            ></el-image> </template
        ></el-table-column>
        <el-table-column prop="result_videos" label="处理结果视频">
          <template #default="scope">
            <video
              v-if="
                Object.prototype.toString.call(scope.row.result_videos) == '[object Array]' &&
                scope.row.result_videos.length >= 1
              "
              width="60"
              height="60"
              controls="controls"
            >
              <source :src="scope.row.result_videos[0]" type="video/ogg" />
              <source :src="scope.row.result_videos[0]" type="video/mp4" />
              <source :src="scope.row.result_videos[0]" type="video/webm" />
              <object :data="scope.row.result_videos[0]" width="320" height="240"></object>
            </video>
            <img v-else src="@/assets/images/errorVideo.png" style="width: 60px; height: 60px; margin-right: 20px" />
          </template>
        </el-table-column>
        <el-table-column prop="exec_time" label="处理时间">
          <template #default="scope">
            <div>{{ $getDateTime(scope.row.exec_time) }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="getDateList"
          v-model:currentPage="tableDataInfo.current_page"
          :total="tableDataInfo.total"
          :page-count="tableDataInfo.last_page"
          background
          layout="total,prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      search: {},
      tableDataInfo: '',
      upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
      loading: false
    }
  },
  created() {
    this.getDateList()
  },
  methods: {
    reset() {
      this.search = {}
      this.getDateList(1)
    },
    dangerSourceFormatter(row, column, cellValue, index) {
      let temp = {
        1: '公众',
        4: '监管机构',
        5: '维保单位',
        9: '社会单位'
      }
      return temp[cellValue]
    },
    getDateList(page) {
      let unit_id = localStorage.getItem('fa_user_info')
      this.loading = true
      let pageNum = 1
      if (page) pageNum = page

      this.$api
        .post('/unit/Dashboard/dangerList', {
          type: 'twoMonthDangerUnitSourceWbTotal',
          unit_id: JSON.parse(unit_id).unit_id,
          ...this.search
        })
        .then((res) => {
          res?.data?.list?.map((curVal) => {
            curVal.report_images = JSON.parse(curVal.report_images)
            curVal.report_videos = JSON.parse(curVal.report_videos)
            curVal.result_images = JSON.parse(curVal.result_images)
            curVal.result_videos = JSON.parse(curVal.result_videos)
          })
          this.tableData = res.data.list
          delete res.data.data
          this.tableDataInfo = res.data
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.block {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
